<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--写法一 -->
<div id="app">
  <h2>{{counter}}</h2>
<!--  由于此处不需要传参数到方法中去，所以这里的()可以不写-->
<!--  <button @click="add()">+</button>-->
<!--  <button @click="sub()">-</button>-->
  <button @click="add">+</button>
  <button @click="sub">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const vue = new Vue({
        el:'#app',
        data:{
            counter: 0,
        },
        methods:{
            add(){
                this.counter++
            },
            sub(){
                this.counter--
            }
        }
    })
</script>



<!--写法二 -->
<!--<div id="app">-->
<!--    <h2>{{counter}}</h2>-->
<!--    <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter&#45;&#45;">-</button>-->
<!--</div>-->

<!--<script src="../js/vue.js"></script>-->
<!--<script>-->
<!--    const vue = new Vue({-->
<!--        el:'#app',-->
<!--        data:{-->
<!--            counter:0,-->
<!--        }-->

<!--    })-->
<!--</script>-->



</body>
</html>